<template>
    <div class="homeHeader">
        <BaseLayoutHeader :padding="5">
            <template #onLeft>
                <div class="userInfo">
                    <div>
                        <img src="http://q1.qlogo.cn/g?b=qq&nk=3536370493&s=100" class="avatar" />
                    </div>
                    <div class="name">
                        <span>{{ nick }}</span>
                    </div>
                </div>
            </template>
            <template #onCenter>
                <div class="title">
                </div>
            </template>
            <template #onRight>
                <div class="addBtn">
                    <el-popover placement="bottom-end" :width="100" trigger="click"
                        popper-class="default_select_popover" popper-style="border-radius:15px">
                        <template #reference>
                            <i class="iconfont icon-chat_add" />
                        </template>

                        <div class="popover_panel" v-for="(item, index) in items" :key="index"
                            @click="handleClick(item)">
                            <div>
                                <div class="title">
                                    <i :class="['iconfont ', item.icon, 'icon']"></i>
                                    <span>
                                        {{ item.title }}
                                    </span>
                                </div>
                            </div>
                        </div>

                    </el-popover>
                </div>
            </template>
        </BaseLayoutHeader>
    </div>
</template>

<script lang="ts" setup>
import BaseLayoutHeader from '@/components/header/BaseLayoutHeader.vue';
import type { PropType } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

export interface HeaderItemType {
    title: string;
    icon: string;
    goto: string;
}

const props = defineProps({
    nick: {
        type: String,
    },
    avatar: {
        type: String,
    },
    items: {
        type: Array<HeaderItemType>
    }
})

const handleClick = (item: HeaderItemType) => {
    router.push({
        name: item.goto
    });
}

</script>

<style lang="scss" scoped>
@use '@/assets/scss/base.scss';

.homeHeader {
    @extend .base_background_color;
    background-image: linear-gradient(to right, rgb(228, 243, 255), rgb(190, 224, 254), rgb(255, 192, 214));

    .userInfo {
        display: flex;
        gap: 5px;

        .avatar {}

        .name {
            display: flex;
            align-items: center;
        }
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .addBtn {
        display: flex;
        justify-content: end;
        align-items: center;

        i {
            font-size: 30px;
        }
    }
}

.icon-chat_add {
    cursor: pointer;
}
</style>
